<template>
  <div class="Box">
    <el-card class="box-card">
      <div class="line1">
        <CountData class="CountData"></CountData>
      </div>
      <div class="line2">
        <LineChart class="lineChart"></LineChart>
        <PieChart class="pieChart"></PieChart>
      </div>
    </el-card>
  </div>
</template>

<script>
import LineChart from '../../components/echarts/LineChart.vue'
import PieChart from '../../components/echarts/PieChart.vue'
import CountData from '../../components/CountData.vue'
export default {
  name: 'MainPage',
  components: {
    LineChart, PieChart, CountData
  }
}
</script>

<style scoped>
.Box {
  padding: 10px;
  height: 100%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  clear: both;
}
.line1,.line2{
  width: 100%;
}
@media screen and (min-width:1501px) {
  .line1 {
    height: 175px;
  }
  .line2 {
    height: 390px;
  }
  .lineChart{
    width: 60%;
    height: 100%;
  }
  .pieChart{
    width: 35%;
    height: 100%;
  }
}
@media screen and (min-width:1000px) and (max-width:1500px) {
  .line1 {
    height: 350px;
  }
  .line2 {
    height: 1000px;
  }
  .lineChart{
    width: 100%;
    height: 40%;
  }
  .pieChart{
    width: 100%;
    height: 56%;
  }
}
@media screen and (max-width:999px) {
  .line1 {
    height: 700px;
  }
  .line2 {
    height: 1000px;
  }
  .lineChart{
    width: 100%;
    height: 40%;
  }
  .pieChart{
    width: 100%;
    height: 56%;
  }
}
.line2{
  margin-top: 20px;
  display: flex;
  flex-flow:row wrap;
  justify-content: space-around;
}
.box-card {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* flex: 1 1 auto; */
}
</style>
